<template>
	<view>
		<template v-if="data['type'] === 'reply'">
			<navigator class="item" :url="'/pages/index/components/detail/index?id='+data['id']">
				<view class="head">
					<text class="status" v-if="data['has_read']"></text>
					{{data['author']['loginname']}}
					<text class="title">{{data['topic']['title']}}</text>中回复了你： 
				</view>
				<view class="contentHtml" v-html="data['reply']['content']"></view>
				<view class="time">{{data['topic']['last_reply_at']}}</view>
			</navigator>
		</template>
		<template v-if="data['type'] === 'at'">
			<navigator class="item" :url="'/pages/index/components/detail/index?id='+data['id']">
				<view class="head">
					<text class="status" v-if="data['has_read']"></text>
					{{data['author']['loginname']}}
					<text class="title">{{data['topic']['title']}}</text>中@了你
				</view>
				<view class="time">{{data['topic']['last_reply_at']}}</view>
			</navigator>
		</template>
	</view>
</template>

<script>
	import { formatDate } from "@/common/utils.js"
	export default {
		props: ['data'],
		methods: {
			fmDate (date){
				return formatDate(date)
			}
		}
	}
</script>
<style lang="scss">
	.item{
		position: relative;
		padding: 5px 10px;
		border-bottom: 1px solid #eee;
		font-size: 14px;
		.head{
			color: #666;
		}
		.title{
			color: $baseColor;
		}
		.status{
			position: absolute;
			right: 15px;
			top: 13px;
			display: inline-block;
			width: 8px;
			height: 8px;
			text-align: center;
			background: orangered;
			border-radius: 100%;
		}
		.contentHtml{
			padding: 5px 0;
			color: #333;
			font-weight: bold;
			line-height: 1.2;
		}
		.time{
			text-align: right;
			font-size: 12px;
			color: #999;
		}
	}
</style>
